
import React from 'react';
import { HomeOutlined } from "@ant-design/icons";
import { Breadcrumb, Button } from "antd";
import Controller from "Controller";


export default function Location() {

    const location = Controller.instance.useMemo(s => s.project.location, [])

    const go = React.useCallback<any>((index: number) => {
        return Controller.instance.pipeline(async s => {
            s.project.location = location.slice(0, index)
        })
    }, [location])

    return (
        <Breadcrumb>
            <Breadcrumb.Item key='home' onClick={go(1)}>
                <Button type="text" style={{ padding: 2 }} ><HomeOutlined /></Button>
            </Breadcrumb.Item>
            {
                location.slice(1).map((e, i) => {
                    return (
                        <Breadcrumb.Item key={i} onClick={go(i + 2)}>
                            <Button type="text" style={{ padding: 2 }} >{e}</Button>
                        </Breadcrumb.Item>
                    )
                })
            }
        </Breadcrumb>
    )
}